<template>
    <view class="badge" v-if="showBadge">
        <text>{{ count }}</text>
    </view>
</template>

<script>
export default {
	name: 'badge',
    props: {
        count: {
            type: Number,
            default: 0
        }
    },
    computed: {
        showBadge() {
            return this.count > 0
        }
    }
}
</script>

<style scoped>
.badge {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    min-width: 36rpx;
    height: 36rpx;
    line-height: 36rpx;
    padding: 0 10rpx;
    background-color: #ff4500;
    color: white;
    border-radius: 18rpx;
    text-align: center;
    font-size: 24rpx;
    box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.2);
    z-index: 10;
}
</style>